<template>
  <el-container class="home-container" ref="find-acitve">
    <!-- 头部 -->
    <el-header>
      <!-- 左侧图标和面包屑 -->
      <div class="header-left">
        <img src="@/assets/logo.png" alt="" />
        <i class="el-icon-menu stretch-button" @click="asideStretch"></i>
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 右侧搜索和个人 -->
      <div class="header-right">
        <!-- 搜索框 -->
        <i class="el-icon-search search-button"></i>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-popover placement="top-start" trigger="hover" width="40px">
          <el-row>
            <el-col>
              <el-menu>
                <el-menu-item class="exit-btn">
                  <span slot="title" @click="exitToLogin">退出</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <div class="personal" slot="reference">
            <span>超级管理员</span>
            <i class="el-icon-arrow-down"></i>
          </div>
        </el-popover>
      </div>
    </el-header>
    <!-- 页面主体 -->
    <el-container class="body-container">
      <!-- 侧边栏 -->
      <el-aside :style="collapse ? 'width:64px' : ' width:180px'">
        <el-row>
          <el-col>
            <el-menu
              default-active="1-1"
              class="el-menu-vertical-demo"
              :collapse="collapse"
              router
            >
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">面板</span>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-custom"></i>
                  <span>后台管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1"
                    ><i class="el-icon-menu"></i>用户</el-menu-item
                  >
                  <el-menu-item index="2-2"
                    ><i class="el-icon-menu"></i>菜单</el-menu-item
                  >
                  <el-menu-item index="2-3"
                    ><i class="el-icon-menu"></i>权限</el-menu-item
                  >
                  <el-menu-item index="2-4"
                    ><i class="el-icon-menu"></i>日志</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="3">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">企业管理</span>
              </el-menu-item>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>题库管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1"
                    ><i class="el-icon-menu"></i>基础题库</el-menu-item
                  >
                  <el-menu-item index="4-2"
                    ><i class="el-icon-menu"></i>精选题库</el-menu-item
                  >
                  <el-menu-item index="4-3"
                    ><i class="el-icon-menu"></i>实体录入</el-menu-item
                  >
                  <el-menu-item index="4-4"
                    ><i class="el-icon-menu"></i>题组列表</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-grid"></i>
                  <span>学科管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1"
                    ><i class="el-icon-menu"></i>学科</el-menu-item
                  >
                  <el-menu-item index="5-2"
                    ><i class="el-icon-menu"></i>目录</el-menu-item
                  >
                  <el-menu-item index="5-3"
                    ><i class="el-icon-menu"></i>标签</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="6">
                <i class="el-icon-menu"></i>
                <span slot="title">面试技巧</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
        <div></div>
      </el-aside>
      <!-- 右侧主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { menuData } from '@/api/user'
export default {
  data() {
    return {
      collapse: false,
      input: '', // 搜索框的内容
      menuDataList: []
    }
  },
  created() {
    this.getMenuData()
  },
  mounted() {},
  methods: {
    // 获取主页信息
    async getMenuData() {
      const res = await menuData()
      // console.log(res)
      this.menuDataList = res.data
      // console.log(this.menuDataList)
    },
    // 控制侧边栏缩进的
    asideStretch() {
      this.collapse = !this.collapse
    },
    // 点击退出按钮
    exitToLogin() {
      this.$store.commit('removeToken', null)
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
  overflow: auto;
}
.el-header {
  position: fixed;
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 69px !important;
  background: linear-gradient(90deg, #1493fa, #01c6fa);
  font-size: 20px;
  padding: 0 5px 0 30px;
}
.body-container {
  margin-top: 69px;
  .el-aside {
    position: fixed;
    z-index: 99;
    height: 100%;
    overflow: hidden;
    top: 68px;
    // max-width:180px !important;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    background-color: #fff;
  }
  // .stretch {
  //       max-width:64px !important;
  // }

  .el-main {
    margin-left: 180px;
    background-color: #f0f2f5;
  }
}
.header-left {
  display: flex;
  justify-content: inherit;
  align-items: inherit;
}
.breadcrumb {
  /deep/ .el-breadcrumb__inner {
    color: #fff;
  }
  /deep/ .el-breadcrumb__inner:hover {
    cursor: pointer;
  }
}
.stretch-button {
  color: #fff;
  padding: 0 25px 0 40px;
}
.search-button {
  color: #fff;
  padding-right: 5px;
  cursor: pointer;
}
.header-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-input {
    width: 200px;
    height: 40px;
    margin-right: 20px;
  }
  .personal {
    margin-right: 10px;
    font-size: 14px;
    color: #fff;
    i {
      margin-left: 10px;
    }
  }
}
.exit-btn {
  text-align: center;
  span {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>
